<template>
  <view>
    <u-navbar :is-back="false" title="七七饮食" :background="background" title-size="44" title-color="#000">
      <image src="https://s1.ax1x.com/2023/03/29/ppcMaG9.png" mode="widthFix" class="search_icon" @click="goSearch">
      </image>
    </u-navbar>
    <!-- 三餐推荐 -->
    <view class="sancan">
      <!-- 标题 -->
      <text class="sancan_title">三餐推荐</text>
      <div class="sancan_box">
        <!-- 早餐 -->
        <div class="sancan_item" @click="goZaoCan">
          <image src="https://s1.ax1x.com/2023/09/09/pP6rNBF.png" mode=""></image>
          <text>早餐</text>
        </div>
        <!-- 午餐 -->
        <div class="sancan_item" @click="goWuCan">
          <image src="https://s1.ax1x.com/2023/09/09/pP6rfNd.png" mode=""></image>
          <text>午餐</text>
        </div>
        <!-- 晚餐 -->
        <div class="sancan_item" @click="goWanCan">
          <image src="https://s1.ax1x.com/2023/09/09/pP6r59I.png" mode=""></image>
          <text>晚餐</text>
        </div>
      </div>
    </view>

    <!-- 今日摄入量 -->
    <view class="today">
      <view class="today_title">今日摄入量</view>
      <!-- 图 -->
      <view class="charts-box">
        <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
      </view>
      <view class="bottom-font">
        今日碳水总值：<span style="font-size: 45rpx;font-weight: 500;">17.58</span>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 自定义导航栏背景
        background: {
          backgroundColor: '#FDF5E0',
        },
        chartData: {},
        opts: {
          color: ["rgba(66, 155, 207, 1)", "#FF6D4C", "rgba(255, 216, 88, 1)"],
          padding: [5, 5, 5, 5],
          fontColor: 'rgba(62, 34, 22, 1)',
          fontSize: 15,
          enableScroll: false,
          extra: {
            pie: {
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: true,
              borderWidth: 4,
              borderColor: "rgba(245, 195, 159, 1)",
            }
          },
          label: {
            show: true,
            formatter(param) {
              return param
            }
          },

        }
      }
    },
    onReady() {
      this.getServerData();
    },
    methods: {
      // 去今日早餐
      goZaoCan() {
        uni.navigateTo({
          url: '../../subpkg/shouye/zaocan/zaocan'
        })
      },
      // 去今日午餐
      goWuCan() {
        uni.navigateTo({
          url: '../../subpkg/shouye/wucan/wucan'
        })
      },
      // 去今日晚餐
      goWanCan() {
        uni.navigateTo({
          url: '../../subpkg/shouye/wancan/wancan'
        })
      },
      // 今日推荐
      goTuiJian() {
        uni.navigateTo({
          url: '../../subpkg/shouye/tuijian/tuijian'
        })
      },
      // 去搜索页
      goSearch() {
        uni.navigateTo({
          url: '../../subpkg/shouye/search/search'
        })
      },
      // 获取图数据
      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            series: [{
              data: [{
                  "name": "碳水化合物",
                  "value": 250,
                },
                {
                  "name": "脂肪",
                  "value": 251
                },
                {
                  "name": "蛋白质",
                  "value": 500
                }
              ]
            }]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500);
      },
    }

  }
</script>

<style lang="scss">
  page {
    background-color: rgba(253, 245, 224, 1);
    padding-bottom: 30rpx;
  }


  // 搜索框
  .search_icon {
    width: 50rpx;
    height: 50rpx;
    margin: 0 20rpx;
  }

  // 三餐推荐
  .sancan {
    width: 692rpx;
    height: 260rpx;
    margin: 0 auto;
    padding: 20rpx;
    border-radius: 48rpx;
    background: rgba(245, 195, 159, 1);

    // 标题
    .sancan_title {
      font-size: 32rpx;
      font-weight: 400;
      // letter-spacing: 0px;
      color: rgba(140, 113, 92, 1);
      text-align: center;
      vertical-align: top;

      &::before {
        content: '|';
        font-weight: 700;
        margin-right: 10rpx;
        color: rgba(140, 113, 92, 1);
      }
    }

    .sancan_box {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      width: 100%;
      height: 100%;
      margin-top: 10rpx;

      // 早餐
      .sancan_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30%;

        image {
          width: 130rpx;
          height: 68rpx;
          margin: 20rpx 0;
        }

        text {
          font-size: 32rpx;
          font-weight: 400;
          // letter-spacing: 0px;
          color: rgba(140, 113, 92, 1);
          margin-top: 10rpx;
          // vertical-align: top;
        }
      }
    }

  }


  // 饼状图
  .charts-box {
    width: 100%;
    height: 280px;
  }

  // 今日推荐
  .today {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 692rpx;
    height: 860rpx;
    border-radius: 48rpx;
    margin: 0 auto;
    margin-top: 44rpx;
    padding-top: 30rpx;
    box-sizing: border-box;
    background: rgba(245, 195, 159, 1);

    // 标题
    .today_title {
      height: 80rpx;
      width: 398rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 48rpx;
      color: rgba(62, 34, 22, 1);
      font-weight: 400
    }

    // 图
    .today_pic {
      width: 494rpx;
      height: 494rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-top: 30rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    // 菜名
    .today_name {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 50rpx;

      // 菜品名称
      .name_text {
        display: flex;
        justify-content: center;
        position: relative;
        width: 430rpx;
        height: 80rpx;
        font-size: 48rpx;
        font-weight: 400;
        color: rgba(140, 113, 92, 1);
        // text-align: center;
        line-height: 80rpx;
      }

      // 添加
      .name_add {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -60rpx;
        width: 75rpx;
        height: 75rpx;
        border-radius: 20rpx;
        font-size: 48rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        border: 1px solid rgba(140, 113, 92, 1);
      }
    }

    .bottom-font {
      display: flex;
      align-items: center;
      color: rgba(62, 34, 22, 1);
      font-size: 30rpx;
      margin-top: 10rpx;
    }

    .yy {
      position: absolute;
      bottom: 20rpx;
      z-index: -1;
      width: 608rpx;
      height: 80rpx;
      border-radius: 50rpx;
      background: rgba(254, 226, 204, 1);
    }
  }
</style>
